import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
import React, { useState } from 'react';
import { CloseOutlined } from '@ant-design/icons';

export default function BigImg({ imgUrl, setImgUrl }: any) {
  return (
    <div className="bigImgWrap" style={{ height: 'calc(100vh - 100px - 211px)' }}>
      <div className="imgwrap center">
        <TransformWrapper>
          <TransformComponent>
            <img src={imgUrl} alt="" />
          </TransformComponent>
        </TransformWrapper>
        <div className="closeImg pointer center" onClick={() => setImgUrl('')}>
          <CloseOutlined style={{ fontSize: '16px' }} />
        </div>
      </div>
    </div>
  );
}
